<template>
  <div class="map-block" :style="{height:Height}">
    <div :style="{height:Height,width:Width}"  id="mapbox"></div>
    <div class="editor-box" v-if="isDraw">
      <a-button type="primary" @click="startDraw">{{isEditor?'重绘':'绘制'}}</a-button>
      <a-button type="primary" @click="save" :disabled="isDisabled">保存</a-button>
    </div>
    <div class="cask" v-show="isEditor"></div>
  </div>
</template>

<script>
import pointInfoBlock  from "./pointInfoBlock";
import mapDevice from './mapDevice';
import Vue from 'vue/dist/vue.esm.js';
export default {
  name: "autoMap",
  data(){
    return {
      maMap:null,
      isEditor:false,
      isDisabled:true,
      postions:[],//绘制的护栏路径
    }
  },
  props:{
    isDraw:{
      type:Boolean,
      default:false,
    },
    Height:{
      type:String,
      default:'100%',
    },
    Width:{
      type:String,
      default:'100%'
    },
    pointData:{
      type:Array,
      default:()=>{
        return [];
      }
    },
    mapInfo:{
      type:Array,
      default:()=>{
        return [];
      }
    }
  },
  mounted(){
    this.$nextTick(()=>{
      this.init();
    })
  },
  watch:{
    mapInfo:{
      handler:function (newdata,olddata){
        this.maMap&&this.draw();
      },
      deep:true
    },
    pointData:{
      handler:function (newdata,olddata){

        this.maMap&&this.draw();
      },
      deep:true
    }
  },
  methods:{
    draw(){
      this.maMap.drawAreaLine(this.mapInfo);
      this.maMap.addPoint(this.pointData,async (data)=>{

        this.createInfoDom({ ...data},pointInfoBlock,mapDevice);
      },()=>{},this.isCluster);
    },
    init(){
      this.maMap =amapdirll('mapbox',{
        center:[98.49432,39.733416],
        DrawGridText:false,//
        DrawGridRelative:false,
        isCustom:false,
      });
      this.maMap.complete(()=>{
        this.draw();
      })
    },
    //单位创建并打开窗体
    createInfoDom(item,block,parm){
      let  _self=this;
      let Content = Vue.extend({
        template: `<div class="window-pop">
                          <block title="${item.name}" @close="closeWindow" :className="className">
                              <parm  :deiveInfo="item" ></parm>
                          </block>
                         </div>`,
        name: 'DeiceDetail',
        components: {
          parm,
          block,
        },
        computed:{
          className:function (){
            return '';
          }
        },
        data(){
          return {
            item: item,
          }
        },
        methods:{
          closeWindow(){
            _self.maMap.closeWindow();
          },
        }
      });

      let component = new Content().$mount();
      this.maMap.createWindowPop(component,item,()=>{
        this.maMap.map.panBy(0,160);
      });
    },
    startDraw(){//开启绘制曲线
      this.isEditor=false;
      this.isDisabled=true;
      this.maMap&&this.maMap.draw('polyline',(position)=>{
        this.isDisabled=false;
        // console.log(position,'我是绘制的position===')
        this.postions=position;
        // this.isEditor=true;
      });
    },
    save(){
      this.$emit('getDrawPath',this.postions);
      this.isDisabled=true;
    },
  }
}
</script>

<style scoped lang="less">
.map-block{
  position: relative;
}
.cask{
  position: absolute;
  left: 0;
  top:0;
  right: 0;
  bottom: 0;
  background:rgba(255,255,255,.1);
  z-index:998
}
.editor-box{
  position: absolute;
  right: 20px;
  top: 20px;
  z-index: 999;
  button{
    margin-left:10px;
  }
}
</style>